<template>
	<div class="buycar">
		<el-collapse>
			<el-collapse-item title="用户信息" name="1">
				<div class="Myinfo">
					<div class="info">
						<el-descriptions :column="2">
							<el-descriptions-item label="用户名">{{obj.ship2name}}</el-descriptions-item>
							<el-descriptions-item label="手机号">{{obj.ship2phone}}</el-descriptions-item>
							<el-descriptions-item label="联系地址">{{obj.ship2addr}}</el-descriptions-item>
						</el-descriptions>
					</div>
					<button @click="goinfo">点击修改输入信息</button>
				</div>
			</el-collapse-item>
		</el-collapse>

		<div class="Cart">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td>商品图片</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>数量</td>
				</tr>
				<tr v-for="(item,i) in list">
					<td><img :src="`api/public/showimg/${item.book.pic}`" /></td>
					<td>{{item.book.name}}</td>
					<td>￥{{item.price}}</td>
					<td>{{item.num}}</td>
				</tr>
			</table>
		</div>
		<div class="total">
			<span>
				{{txt}}
			</span>
			<span>总价:
				{{totalPrice}}
			</span>
			<button @click="gopay" v-if="isdisplay">下单</button>
			<button @click="dopay" v-if="!isdisplay" >去付款</button>
		</div>
	</div>
</template>

<script>
	import { f } from 'core-js/modules/_object-dp';
import {
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		name: 'MobileShopping',
		data() {
			return {
				obj: {
					ordid: 0,
					ship2addr: '',
					ship2phone: '',
					ship2name: '',
					carts: []
				},
				items: [],
				homelist: [],
				shipInfo: [],
				isdisplay: true,
				txt:'',
				
			}
		},
		created() {
			this.$axios.get("/api/user/shipInfo").then((res) => {
				if (res.status == 200) {
					console.log(res.data);
					
					this.obj.ship2addr = res.data.data.addr
					this.obj.ship2phone = res.data.data.phone
					this.obj.ship2name = res.data.data.name
				}
			}).catch((error) => {
				console.log(error);
			})
			this.list.forEach((item, i) => {
				this.items.push(item);
			})

		},

		methods: {
			...mapActions('shelf', ['BookShelf']),
			goinfo() {
				this.$router.push("updatinfo");
			},
			
			gopay() {

				this.obj.carts = this.items;
				console.log(this.obj);
				this.$axios.post("/api/fore/cart/add2Order",this.obj).then((res) => {
					if (res.status == 200) {
						console.log(res.data);
						this.homelist = res.data.data
						this.txt='订单下单成功,等等支付'
						this.isdisplay = false
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			dopay(){
				this.$router.push({
					path: "mypay/"+this.homelist.ordid,
				})
			}
		},
		computed: {
			...mapState('shelf', ['list']),
			...mapGetters('shelf', ['totalPrice']),
		},
		beforeDestroy() {
			console.log('清理');
			this.BookShelf(
				null
			)
		}
	}
</script>
<style scoped>
	
	.buycar .Cart table {
		width: 100%;
	}


	.buycar .Myinfo {
		
		margin: 1rem auto;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.buycar .Myinfo button {
		width: 100%;
		height: 3rem;
	}

	.buycar .Myinfo .info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		width: 100%;
	}

	.buycar .Myinfo .info h2 {
		font-size: 1.5rem;
	}

	.buycar .Myinfo.info div {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		/* width: 50%; */
		font-size: 1.2rem;
	}

	.buycar .Myinfo .info input {
		letter-spacing: 0.05rem;
		font-size: 1rem;
	}

	.buycar .Cart tr {
		background-color: #f0d4a0;
		width: 100%;
		height: 4rem;
		text-align: center;

	}

	.buycar .Cart tr button {
		background-color: initial;
		border: none;
		width: 40px;
		margin: 0;
	}

	.buycar .Cart img {
		width: 50px;
	}

	.buycar .Cart {
		width: 100%;
		height: 100%;
		background-color: #f0d4a0;
		position: relative;

	}

	.buycar .total {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 3rem;
		text-align: center;

	}

	.buycar .total span {
		height: 2.5rem;
		line-height: 2.5rem;
		/* width: 120px; */
	}

	.buycar .total button {
		height: 2.5rem;
		line-height: 2.5rem;
		width: 200px;
		background-color: #f36b6b;
		border: none;
	}
</style>